<script setup lang="ts">
import {ref} from 'vue'
import {queryArticleList,queryBannerArticle,
  queryAsyncArticleList,queryCategoryList}
  from '@/api/index'
import {ElMessage } from 'element-plus'
import type {ArticleBase} from "~/types";

const bannerList = ref<any[]>([])

const activeName = 'first';

const queryFrom = ref({
  pageNo:1,
  pageSize:10,
  categoryId:''
})
const totalPage = ref(0)
const list = ref<ArticleBase[]>([]);
const categoryList = ref<any[]>([])
const { data,refresh } = await queryAsyncArticleList(queryFrom.value)
if(!data.value){
  refresh();
}
//@ts-ignore
totalPage.value = data.value.result.pages
//@ts-ignore
list.value = data.value.result.records
const { data:categoryData,refresh:categoryRefresh } = await queryCategoryList()
if(!categoryData.value){
  categoryRefresh();
}
//@ts-ignore
categoryList.value = categoryData.value.result;

const isAtBottom = ref(false);
const getArticleList = (flag = true)=>{
  queryArticleList(queryFrom.value).then((res:any)=>{
    totalPage.value = res.result.pages
    list.value = flag? res.result.records:[...list.value,...res.result.records]
  })
}
const checkScrollBottom = () => {
  // 获取页面的滚动高度和视口高度
  const scrollHeight = document.documentElement.scrollHeight;
  const scrollTop = window.scrollY;
  const clientHeight = window.innerHeight;

  // 判断是否到达底部
  isAtBottom.value = scrollTop + clientHeight >= scrollHeight - 5; // 允许一定的误差
  if(isAtBottom.value&&queryFrom.value.pageNo<totalPage.value){
    queryFrom.value.pageNo++;
    getArticleList(false)
  }else if(isAtBottom.value&&queryFrom.value.pageNo===totalPage.value){
    ElMessage.warning("没有更多了")
  }
};
const handleClick =async (name:number)=>{
  //@ts-ignore
  queryFrom.value.categoryId = name==='first'?'':name;
  queryFrom.value.pageNo = 1;
  getArticleList();
}
const getImgUrl = (url:string)=>{
  const regex = /^(https?:\/\/[^\s/$.?#].[^\s]*)$/i;
  if(regex.test(url)){
    return url;
  }
  return 'https://file.qcycloud.com/nuxt-blog/'+url
}
const getBannerArticle = ()=>{
  queryBannerArticle().then((res:any)=>{
    console.log(res.result)
    bannerList.value = res.result.map((item:any)=>{
      return{
        ...item,
        avatar:getImgUrl(item.avatar)
      }
    })
  })
}
onMounted(() => {
  window.addEventListener('scroll', checkScrollBottom);
});

onBeforeUnmount(() => {
  window.removeEventListener('scroll', checkScrollBottom);
});
getBannerArticle()
</script>

<template>
  <div class="home">
    <div class="content flex between">
     <div class="leftBox">
       <div class="top flex between">

         <div class="tabs">
           <el-tag
               name="first"
               type="success"
               @click="handleClick('first')"
           >最新</el-tag>
           <el-tag v-for="item in categoryList"
                   :key="item.id"
            @click="handleClick(item.id)"

           > {{item.name}}</el-tag>
         </div>

       </div>
       <div class="box">
         <div class="box-content flex between">
           <div class="article-list">
             <div class="item flex column between scale-up-center"
                  v-for="item in list"
                  :key="item.id"
             >
               <div class="top flex between">
                 <div class="header">
                   <div class="blogBaseInfo flex">
                     <span class="topUp" v-if="item.isStick===1">置顶</span>
                     <nuxt-link :href="`/article/${item.id}.html`">
                       <h4 class="blogTile">{{item.title}}</h4>
                     </nuxt-link>
                   </div>
                   <div class="desc">
                  <span>
                    {{item.summary}}
                  </span>
                   </div>
                 </div>
                 <el-image  :src="getImgUrl(item.avatar)"
                            class="blog-cover imgZoom"
                            v-if="!$device.isMobile"
                 >
                   <template #error>
                     <div class="image-slot">
                       <img src="https://file.qcycloud.com/20240123_1705973581037.png"
                            style="width: 100%;height: 100%"
                       />
                     </div>
                   </template>
                 </el-image>
               </div>
               <div class="authorInfo flex alignCenter between">
                 <div class="left flex alignCenter">
                   <div class="authorName flex alignCenter">
                     <img src="@/assets/images/logo.png"/>
                     <span>Silence逸辰</span>
                   </div>
                   <div class="tags">
                     <el-space>
                       <el-tag effect="light">
                         {{item.categoryName}}
                       </el-tag>
                     </el-space>

                   </div>
                 </div>
                 <div class="right">
                   <el-space>
                     <div class="icon flex alignCenter" v-if="!$device.isMobile">
                       <Icon name="my-icon:view"/>
                       <span>{{item.quantity}}</span>
                     </div>
                     <div class="icon flex alignCenter">
                       <Icon name="my-icon:time"/>
                       <span>{{item.createTime}}</span>
                     </div>
                   </el-space>
                 </div>
               </div>
               <div class="originFlag" v-if="item.isOriginal===1">
                 <span>原创</span>
               </div>
             </div>
             <el-empty v-if="list.length===0" description="没有更多" />
           </div>

         </div>
       </div>
     </div>
      <div class="rightBox" v-if="!$device.isMobile">
        <div  v-if="!$device.isMobile">
          <AuthorInfo/>
        </div>
        <div class="cardGroup">
          <div class="card prohibitAttackPrompt flex alignCenter center">
            <img src="https://file.qcycloud.com/2.jpg"/>
          </div>
          <!--          <div class="card recommend">-->
          <!--            <div class="header">-->
          <!--              推荐文章-->
          <!--            </div>-->
          <!--            <div class="list">-->
          <!--              <div class="item flex alignCenter between"-->
          <!--              v-for="item in 5"-->
          <!--                   :key="item"-->
          <!--              >-->
          <!--                <div class="left">-->
          <!--                  <div :class="'ranking color'+item"-->

          <!--                  >-->
          <!--                    <span>{{item}}</span>-->
          <!--                  </div>-->
          <!--                  <el-image  src="https://file.qcycloud.com/20240123_1705973581037.png"-->
          <!--                             class="blog-cover imgZoom"-->
          <!--                             v-if="!$device.isMobile"-->
          <!--                  >-->
          <!--                    <template #error>-->
          <!--                      <div class="image-slot">-->
          <!--                        <img src="https://file.qcycloud.com/20240123_1705973581037.png"-->
          <!--                             style="width: 100%;height: 100%"-->
          <!--                        />-->
          <!--                      </div>-->
          <!--                    </template>-->
          <!--                  </el-image>-->
          <!--                </div>-->
          <!--                <div class="right multiline-ellipsis-txt">-->
          <!--                  <nuxt-link href="/article/2.html">-->
          <!--                    <span class="title">推荐文章推荐文章推荐文章推荐文章</span>-->
          <!--                  </nuxt-link>-->
          <!--                  <span class="time">2024-09-10 10:24:35</span>-->
          <!--                </div>-->
          <!--              </div>-->
          <!--            </div>-->
          <!--          </div>-->
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.home{
  margin-top: 20px;
  .content{
    width: 65%;
    margin: 0 auto;

    .leftBox{
      width: 70%;
      .top{
        .tabs{
          width: 100%;
          background-color: #fff;
          padding: 20px;
          .el-tag{
            margin: 5px;
          }
        }
        .authorInfo{
          width: 28%;
          //height: 420px;
          overflow: hidden;
          .ad{
            width: 100%;
            height: calc(100% - 270px);
            margin: 10px 0;
            border-radius: 10px;
            position: relative;
            img{
              border-radius: 10px;
              width: 100%;
              height: 100%;
            }
            span{
              display: block;
              background: #0000004d;
              height: 30px;
              position: absolute;
              width: 100%;
              bottom: 10px;
              color: #fff;
              text-align: center;
              line-height: 30px;
            }
          }
        }
      }
      .box{
        margin: 20px 0;
        .box-content{
          width: 100%;
          div{
            //border: 1px solid;
          }
          .article-list{

            .item{


              box-shadow: var(--el-box-shadow-light);
              height: 170px;
              margin-bottom: 10px;
              border-radius: 5px;
              background-color: #fff;
              padding:15px 20px;
              position: relative;
              .top{
                height: 120px;
                overflow: hidden;
                .header{
                  width: 68%;
                  .blogBaseInfo{
                    .topUp{
                      background-image: -webkit-linear-gradient(0deg, #3ca5f6 0, #a86af9 100%);
                      padding-left: 5px;
                      padding-right: 5px;
                      display: inline-block;
                      border-top-right-radius: 5px;
                      border-bottom-left-radius: 5px;
                      font-size: .9rem;
                      margin-right: 5px;
                      color: #fff;
                      height: 20px;
                      white-space: nowrap;
                      /* width: 38px;
                       height: 17px;*/
                    }
                    .blogTile{
                      position: relative;
                      display: -webkit-box;
                      -webkit-line-clamp: 2; /* 显示2行 */
                      -webkit-box-orient: vertical;
                      overflow: hidden;
                      text-overflow: ellipsis;
                      line-height: 1.5em; /* 行高，根据需要调整 */
                      max-height: 3em; /* 根据行高和行数计算总高度 */
                      color: #000;
                    }
                    .blogTile::after {
                      content: '';
                      position: absolute;
                      bottom: 0;
                      left: 0;
                      width: 100%;
                      height: 2px;
                      background-color: #000;
                      transform: scaleX(0);
                      transform-origin: left;
                      transition: transform 0.5s ease;
                    }

                    .blogTile:hover::after {
                      transform: scaleX(1);
                    }

                    /* 添加动画效果，使得线条最后在右边消失 */
                    @keyframes slide-out {
                      0% {
                        transform: scaleX(1);
                        transform-origin: left;
                      }
                      100% {
                        transform: scaleX(0);
                        transform-origin: right;
                      }
                    }

                    .blogTile::before {
                      content: '';
                      position: absolute;
                      bottom: 0;
                      left: 0;
                      width: 100%;
                      height: 2px;
                      background-color: #000;
                      transform: scaleX(0);
                      transform-origin: left;
                      transition: transform 0.5s ease;
                      z-index: -1; /* 保证动画在文本下方 */
                    }

                    .blogTile:not(:hover)::before {
                      animation: slide-out 0.5s forwards;
                    }
                  }
                  .desc{
                    margin: 10px 0;
                    color: #606266;
                    font-size: 15px;
                    overflow: hidden;
                    overflow-wrap: break-word;
                    display: -webkit-box;
                    -webkit-line-clamp: 4; /* 显示2行 */
                    -webkit-box-orient: vertical;
                    text-overflow: ellipsis;
                    line-height: 20px; /* 行高，根据需要调整 */

                  }
                }
                .blog-cover{
                  width: 182px;
                  height: 118px;
                  border-radius: 5px;
                  border: 1px solid #e4e7ed;
                }
              }
              .authorInfo{
                .left{
                  img{
                    width: 25px;
                    height: 25px;
                    border-radius: 50%;
                    margin-right: 10px;
                  }
                  span{
                    font-size: 15px;
                    margin-right: 10px;
                    color: var(--theme-color);
                  }
                }
                .right{
                  .iconify{
                    font-size: 14px !important;
                    margin-right: 3px;
                  }
                  span{
                    font-size: .8rem;
                  }
                }
              }
              .originFlag{
                width: 50px;
                height: 50px;
                background-color: #40c9c6;
                clip-path: polygon(0% 0%, 100% 0%, 100% 100%);
                position: absolute;
                right: 0;
                top: 0;
                color: #fff;
                font-size: 14px;
                span{
                  position: absolute;
                  color: #fff;
                  top: 8px;
                  left: 50%;
                  font-size: 12px;
                  transform: rotate(50deg);
                }
              }
            }
          }
        }
      }
    }
    .rightBox{
      width: 28%;
      .cardGroup{
        .card{
          border-radius: 5px;
          background-color: #fff;
          min-height: 144px;
          box-shadow: var(--el-box-shadow-light);
          margin-top: 10px;
        }
        .prohibitAttackPrompt{
          img{
            width: 80%;
            height: 80%;
          }
        }
        .recommend{
          padding: 10px 20px;
          .header{
            color: var(--theme-color);
            font-weight: bold;
            border-bottom: 1px solid #f0f0f4;
            padding-bottom: 10px;
          }
          .list{
            .item{
              margin: 20px 0;
              .left{
                position: relative;
                .blog-cover{
                  width: 120px;
                  height: 75px;
                  border-radius: 5px;
                }
                .ranking{
                  position: absolute;
                  display: inline-block;
                  width: 30px;
                  border-radius: 2px 8px 8px 2px;
                  text-align: right;
                  padding-right: 5px;
                  font-weight: 700;
                  color: #fff;
                  margin-top: 5px;
                  z-index: 50;
                  background-color: #818b95;
                  &.color1{
                    background-color: #f56c6c;
                  }
                  &.color2{
                    background-color: #ffa41b;
                  }
                  &.color3{
                    background-color: #02a0f8;
                  }
                }
              }
              .right{
                width: calc(100% - 120px);
                color: #303133;
                .title{
                  font-size: 14px;
                  color: #303133;
                }
                .time{
                  margin-top: 20px;
                  font-size: 12px;
                  white-space: nowrap;
                  display: inline-block;
                }
              }
            }
          }
        }
      }
    }
  }
}
@media screen and (max-width: 750px){

}
@media screen and (max-width: 1118px){
  .home{
    margin-top: 20px;
    .content{
      width: 95%;
      margin: 0 auto;
      min-height: calc(100vh - 242px);
      .leftBox{
        width: 100%;
        .top{
          .banner{
            width: 100%;
            :deep(.el-carousel__container){
              height: 420px;
            }
          }
          .authorInfo{
            display: none;
          }
        }
        .box{
          margin: 20px 0;
          .box-content{
            width: 100%;
            div{
              //border: 1px solid;
            }
            .article-list{
              width: 100%;
              .item{
                box-shadow: var(--el-box-shadow-light);
                height: 170px;
                margin-bottom: 10px;
                border-radius: 5px;
                background-color: #fff;
                padding:15px 20px;
                .top{
                  height: 120px;
                  overflow: hidden;
                  .header{
                    width: 100%;
                    .blogBaseInfo{
                      flex-wrap: wrap;
                      .topUp{
                        white-space: nowrap;
                        background-image: -webkit-linear-gradient(0deg, #3ca5f6 0, #a86af9 100%);
                        padding-left: 5px;
                        padding-right: 5px;
                        display: inline-block;
                        border-top-right-radius: 5px;
                        border-bottom-left-radius: 5px;
                        font-size: .9rem;
                        margin-right: 5px;
                        color: #fff;
                        height: 20px;
                        /* width: 38px;
                         height: 17px;*/
                      }
                      .blogTile{
                        position: relative;
                        display: -webkit-box;
                        -webkit-line-clamp: 2; /* 显示2行 */
                        -webkit-box-orient: vertical;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        line-height: 1.5em; /* 行高，根据需要调整 */
                        max-height: 3em; /* 根据行高和行数计算总高度 */
                        color: #000;
                      }
                      .blogTile::after {
                        content: '';
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        width: 100%;
                        height: 2px;
                        background-color: #000;
                        transform: scaleX(0);
                        transform-origin: left;
                        transition: transform 0.5s ease;
                      }

                      .blogTile:hover::after {
                        transform: scaleX(1);
                      }

                      /* 添加动画效果，使得线条最后在右边消失 */
                      @keyframes slide-out {
                        0% {
                          transform: scaleX(1);
                          transform-origin: left;
                        }
                        100% {
                          transform: scaleX(0);
                          transform-origin: right;
                        }
                      }

                      .blogTile::before {
                        content: '';
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        width: 100%;
                        height: 2px;
                        background-color: #000;
                        transform: scaleX(0);
                        transform-origin: left;
                        transition: transform 0.5s ease;
                        z-index: -1; /* 保证动画在文本下方 */
                      }

                      .blogTile:not(:hover)::before {
                        animation: slide-out 0.5s forwards;
                      }
                    }
                    .desc{
                      margin: 10px 0;
                      color: #606266;
                      font-size: 15px;
                      overflow: hidden;
                      overflow-wrap: break-word;
                      display: -webkit-box;
                      -webkit-line-clamp: 3; /* 显示2行 */
                      -webkit-box-orient: vertical;
                      text-overflow: ellipsis;
                      line-height: 20px; /* 行高，根据需要调整 */

                    }
                  }

                }
                .authorInfo{
                  flex-wrap: wrap;
                  .left{
                    img{
                      width: 25px;
                      height: 25px;
                      border-radius: 50%;
                      margin-right: 10px;
                    }
                    span{
                      font-size: 15px;
                      margin-right: 10px;
                      color: var(--theme-color);
                    }
                  }
                  .right{
                    margin-top: 5px;
                    .iconify{
                      font-size: 14px !important;
                      margin-right: 3px;
                    }
                    span{
                      font-size: .8rem;
                    }
                  }
                }
              }
            }
            .cardGroup{
              display: none;
            }
          }
        }
      }

    }
  }
}
</style>
